<template>
  <g>
    <path class="vue-flow__connection animated" fill="none" stroke="#4EBC7D" :stroke-width="5"
      :d="`M${sourceX},${sourceY} C ${sourceX} ${targetY} ${sourceX} ${targetY} ${targetX},${targetY}`" />

    <circle :cx="targetX" :cy="targetY" fill="#fff" :r="4" stroke="#4EBC7D" :stroke-width="5" />
  </g>
</template>

<script setup lang="ts">
defineProps({
  sourceX: {
    type: Number,
    required: true,
  },
  sourceY: {
    type: Number,
    required: true,
  },
  targetX: {
    type: Number,
    required: true,
  },
  targetY: {
    type: Number,
    required: true,
  },
})
</script>

